import React from "react";
import './Todo.css';
import TodoHeader from "../TodoHeader/TodoHeader";
import TodoMain from "../TodoMain/TodoMain";
import TodoFooter from "../TodoFooter/TodoFooter";
import { useEffect } from "react";
//1. 导入 useDispatch 函数
import {useDispatch} from 'react-redux';
import { initTodoAction, asyncReqGetTodo } from "../../redux/reducers/todoReducer";

export default function Todo() {

  //2. 获得dispatch 函数
  let dispatch = useDispatch();

  //3. 初始化任务数据
  useEffect(() => {
    //todo 任务的初始化
    dispatch(asyncReqGetTodo())
  }, [])

  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <TodoHeader  />
        <TodoMain  />
        <TodoFooter  />
      </div>
    </div>
  );
}
